<template>
  <div>
    <div>
      <search-form
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
        @visible-change="resetTableHeight"
      />
      <table-box
        ref="refTable"
        table-size="mini"
        :table-config="tableConfig"
        show-selection
        dragable
        :selected-arry.sync="tableSelected"
        :other-filters="otherFilters"
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      />
    </div>
    <div>
      <import-files v-if="importVisible" title="导入" :visible.sync="importVisible" :config="fileImportConfig" @success="refreshTable" />
      <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" />
    </div>
  </div>
</template>
<script>
// import detailPage from './Detail.vue'
export default {
  name: 'ExceptionDetail',
  components: { },
  data() {
    return {
      activeRowData: {},
      exportVisible: false,
      importVisible: false,
      tableSelected: [],
      // otherFilters: [],
      otherFilters: [],
      showEdit: false,
      showDetail: false,
      searchConfig: [
        { label: '配图任务编号', prop: 'taskCode', type: 'text', placeholder: '', filter: true },
        { label: '门店建设项目号', prop: 'constCode', type: 'text', placeholder: '', filter: true },
        { label: '门店名称', prop: 'shopName', type: 'text', placeholder: '', filter: true },
        {
          type: 'select',
          prop: 'exceptionType',
          label: '异常类型',
          filter: true,
          config: {
            filterable: false,
            remoteUrl: '/data-dict/api/v2/dictionary/SLM_EXCEPTION_TYPE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '复尺时间', prop: 'rulerTime', type: 'date', placeholder: '', filter: true },
        { label: '异常编码', prop: 'exceptionCode', type: 'text', placeholder: '', filter: true }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/autonomyDesignExceptionDetail/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        // 表格字段动态配置
        setting: [
          {
            prop: 'taskCode',
            label: '配图任务编号',
            minWidth: '160'
          },
          {
            prop: 'constCode',
            label: '门店建设项目号',
            minWidth: '140'
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: '140'
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: '140'
          },
          {
            prop: 'exceptionType',
            label: '异常类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SLM_EXCEPTION_TYPE'
            },
            minWidth: '100'
          },
          {
            prop: 'rulerTime',
            label: '复尺时间',
            minWidth: '140'
          },
          {
            prop: 'exceptionCode',
            label: '异常编码',
            minWidth: '140'
          }

        ],
        btnList: this.isProduction ? null : [
        ]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '门店升级改造',
        dataApi: '/slm-admin/api/v1/shopUpgrade/export?type=0',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      },
      {
        code: 'exportTemplate',
        name: '门店升级改造模板',
        async: false,
        templateMethod: 'post',
        templateApi: '/slm-admin/api/v1/shopUpgrade/export?type=1'
      }]
    },
    fileImportConfig() {
      return [{
        code: 'importNew',
        name: '新增门店升级改造',
        async: false,
        apiUrl: '/slm-admin/api/v1/shopUpgrade/importExcel?type=1'
      },
      {
        code: 'importUpdate',
        name: '修改门店升级改造',
        async: false,
        apiUrl: '/slm-admin/api/v1/shopUpgrade/importExcel?type=0'
      }]
    }
  },
  async  created() {
  },
  methods: {
    // 清空搜索数据
    clearSearch() {
    },
    resetTableHeight() {
      this.$refs.refTable.refreshTableHeight()
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.tableSelected.filter(item => item.id === row.id)
      return filterArr.length > 0 ? 'selected-highlight' : ''
    },
    refreshTable(flag) {
      this.$refs.refTable.initTableData(flag ? ' ' : 'onPage')
    },
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'enable':
          if (!this.singleJudge(this.tableSelected, '启用', false)) {
            return
          }
          this.handleEnable()
          break
        case 'disable':
          if (!this.singleJudge(this.tableSelected, '停用', false)) {
            return
          }
          this.handleDisable()
          break
        case 'import':
          this.handleImport()
          break
        case 'export':
          this.handleExport()
          break
        default:
          break
      }
    },
    handleEnable() {
      const tempArr = this.tableSelected.filter(v => v.state)
      if (tempArr.length > 0) {
        this.$message.warning('所选项包括启用项，请重新选择')
        return
      }
    },
    handleDisable() {

    },
    // 新增/编辑
    handleEdit(data) {
      if (data && data.id) {
        this.activeRowData = data
      } else this.activeRowData = {}
      this.showEdit = true
    },
    handleDetail(data) {
      if (data && data.id) {
        this.showDetail = true
        this.activeRowData = data
      }
    },
    // 导出
    handleExport() {
      this.exportVisible = true
      // const querys = this.$refs.refTable.getAllFilters()
      // const searchFilters = (querys && querys.searchBarFilter) || []
      // this.exportData.filtersRaw = [...this.otherFilters, ...searchFilters]
      // this.visible = true
    },
    // 导入
    handleImport() {
      this.importVisible = true
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    }
  }
}
</script>

